<template>
	<view>
		<view class="login-bg">
			<view class="bg2">
				<view style="height: 150rpx;padding-top: 50rpx;width: 100%;display: flex;">
					<view style="width: 78%;height: 100rpx;">
						<view style="color: #fff;padding-left: 5%;">Hi，您好</view>
						<view style="color: #FEFEFE;padding-left: 5%;font-size: 26rpx;font-weight: 400;opacity: 0.5;">欢迎来到我的客服，服务让生活更简单</view>
					</view>
					<image src="../../static/kefu.png" style="width: 130rpx;height: 130rpx;margin-top: -20rpx;"></image>
				</view>
			</view>
			
			<view class="t-box" >
				<image class="erweima" :src="kefu.image" ></image>
				<view>长按二维码识别</view>
				
				<view class="kuang">
					<view class="k_left">
						<view style="color: #999;">客服名称</view>
					</view>
					<view class="k_right">
						<view style="color: #000;">{{kefu.title}}</view>
					</view>
				</view>
				<view class="kuang">
					<view class="k_left">
						<view style="color: #999;">客服微信号</view>
					</view>
					<view class="k_right">
						<view style="color: #000;">{{kefu.weixin}}</view>
					</view>
				</view>
				<view class="kuang">
					<view class="k_left">
						<view style="color: #999;">客服手机号</view>
					</view>
					<view class="k_right">
						<view style="color: #000;">{{kefu.phone}}</view>
					</view>
				</view>
				<view class="kuang">
					<view class="k_left">
						<view style="color: #999;">上班时间</view>
					</view>
					<view class="k_right">
						<view style="color: #000;">{{kefu.work}}</view>
					</view>
				</view>
				<view style="height: 50rpx;"></view>
			</view>
		</view>
			
		<custom-tab-bar :items="tabItems" :currentIndex="currentTab" @item-click="onTabClick"
		        :color="color" :selectedColor="selectedColor"></custom-tab-bar>
	</view>
</template>

<script>
	import CustomTabBar from '@/uni_modules/niceui-tabBar/components/niceui-tabBar/niceui-tabBar.vue';
	import tabbar from '@/uni_modules/niceui-tabBar/common/tabbar.js'
	export default {
	    components: {
			CustomTabBar
	    },
	    data() {
	        return {
				currentTab: 3, // 当前选中的tab索引
				tabItems:tabbar.tabItems,
				color:tabbar.color,
				selectedColor:tabbar.selectedColor,
				kefu:{}
			}
		},
		onLoad() {
			var that = this
			uni.request({
				url:getApp().globalData.host+'srapi/home/kefu',
				method:'POST',
				header: { // 设置请求的header
					'content-type': 'application/json' // 默认值
				},
				success: (res) => {
					if(res.data.data){
						
						that.kefu = res.data.data
					}
				}
			})
						
		},
		methods: {
			onTabClick(index) { // 切换tab的函数，当选中某个tab时触发
			   //this.currentTab = index;  

			   if(index!=this.currentTab){
					uni.redirectTo({
						url:this.tabItems[index].pagePath
					})
			   }
			 },
		}
	}
</script>

<style>
	/* #ifdef H5 */
		page, .uni-page-wrapper { background-color: #f8f8f8; } /* 仅在H5平台生效 */
		/* #endif */
		
		page {
		    padding-bottom: 140rpx;
		}
		
		.login-bg {
		}
		.bg2{
			height: 250rpx;
			background-color: #336CFE;
		}
		.t-box{
			text-align: center;
			width: 100%;
			margin: 0 auto;
			margin-top: -50rpx;
			font-size: 28rpx;
			background-color: #ffffff;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.15);
			z-index: 9;
		}
		.erweima{
			width: 270rpx; height: 270rpx; padding-top: 30rpx;margin:auto;
		}
		.kuang{
			width: 100%;display: flex;margin-top: 50rpx;
		}
		.line{
			width: 110%;
			border-bottom: 1px #eee solid;
			margin-left: -5%;
			margin-top: 30rpx;
		}
		.k_left{
			width: 45%;
			padding-left: 5%;
			text-align: left;
			height: 30rpx;
			line-height: 30rpx;
		}
		.k_left view{
			height: 30rpx;
			line-height: 30rpx;
		}
		.k_right{
			width: 45%;
			padding-right: 5%;
			text-align: right;
			color: #999;
		}
		.jiantou{
			width: 20rpx;
			height: 20rpx;
			margin-top: 12rpx;
			margin-left: 5rpx;
		}
</style>